fix: ノートをコピーして歌詞入力などのペーストしたときにノートオブジェクトがペーストされないようにする #2615

romot-co · 2025-03-15T11:10:21Z

内容

ref: #2591

ソングにおいて以下の形で
ノートをコピーしてから歌詞入力などにペーストするとノートのJSONが貼り付けられてしまう問題を修正します。

ElectronエディタやChromeの場合

ノートコピー時にカスタムMIMEタイプweb application/vnd.voicevox.song-notesでノート構造をコピーします
シーケンサへのペーストではノートがペーストされます
歌詞入力や他の入力欄へのペーストでは無視されなにもペーストされません

ブラウザ版でFirefoxやSafariなどの場合

ノートコピー時にtext/htmlのdata属性にノート構造をコピーし、text/plainに空文字をセットします
シーケンサへのペーストではtext/htmlのdata属性がペーストされます
歌詞入力や外部アプリへのペーストではtext/htmlのタグが無視されるかtext/plainが優先されなにもペーストされません

スクリーンショット・動画など

その他

クリップボードAPIの制限
https://developer.mozilla.org/ja/docs/Web/API/Clipboard_API#%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3%E3%81%AE%E8%80%83%E6%85%AE

Chrome 104以降でカスタムMIMEタイプが使えるAsync Clipboard API
https://developer.chrome.com/blog/web-custom-formats-for-the-async-clipboard-api?hl=ja

voicevox-preview-pages · 2025-03-15T11:14:19Z

🚀 プレビュー用ページを作成しました 🚀

更新時点でのコミットハッシュ：05d7de8

Hiroshiba · 2025-03-18T17:57:01Z

PRありがとうございます！！

もしよければ @terapotan さんもコメントいただけると！！
（プルリクエストをcheckoutするか、こちらのブラウザ版で動作確認できると思います）

Copilot

Pull Request Overview

This PR fixes an issue where copying notes from a song resulted in pasting the entire note JSON when pasted outside of the sequencer, by separating out the data formats for sequencer paste (note JSON) and general paste (lyrics text only). Key changes include:

Serializing notes as JSON and combining lyric text for the clipboard.
Using a custom MIME type "web application/vnd.voicevox.song-notes" for sequencer paste while providing a plain text fallback.
Implementing a fallback mechanism for browsers that do not support custom MIME types.

Comments suppressed due to low confidence (1)

src/store/singing.ts:3289

Consider adding a feature detection or fallback for navigator.clipboard.read to improve compatibility with browsers that do not support this asynchronous Clipboard API method.

const clipboardItems = await navigator.clipboard.read();

Hiroshiba

ははーーーーーー　なるほど、webのクリップボードはこういう感じになってるんですねぇ！！！！
たまに変な挙動するな〜と感じることがあるのですが、こりゃしょうがないわって気持ちになりました！！！　ややこしすぎる！！！

主にコード整理周りでコメントしました！

Hiroshiba · 2025-03-18T18:46:38Z

src/store/singing.ts

        .filter((note: Note) => noteIds.has(note.id))
        .map((note: Note) => {
          // idのみコピーしない
          const { id, ...noteWithoutId } = note;


（この行に関係ないコメントです、議論を分けたかったので）

ちょっと提案なのですが、クリップボード周りの処理を関数に切り出してファイルをまとめるのはどうでしょうか 👀
コンテキストが特殊なのと、定数などがいっぱいあるので少なくとも外に出したほうがメンテしやすそうだな〜と。

storeは関数抜き出しするの面倒だったのですが、同名のディレクトリ以下に配置すれば綺麗に移行できることに気付きました！
やることは単純で、

新しくstore/singing/ディレクトリを作って、

store/singing.tsをstore/singing/index.tsに移動して

切り出した関数をstore/singing/clipboard.tsなどに配置する

感じです！実例だとこんな感じ！
切り出した関数は第１引数でcontext: ActionContextを受け取って、こんな感じで渡すとか･･･！
（もちろんstateとかactionsとかだけ渡すのもOKだと思います）

説明テキストとか、MIME Type定数とか、移してまとめられると思うのでキレイになるんじゃないかな〜みたいな！

型とかだいぶパズルになっててややこしいと思うのでなんでも聞いて下さい！
なんなら残しといていただければこっちでちゃちゃっとやっちゃいます 🙏
もしよかったら！！

こちらclipboardHelper.tsに分離する形で修正しました！
リファクタリングもちょっとしたつもりですが、わかりづらければおしらせください…！
https://github.com/romot-co/voicevox/blob/fix/copy_paste_with_custom_mimetype-2591/src/store/singing/clipboardHelper.ts

Hiroshiba · 2025-03-18T18:49:57Z

src/store/singing.ts

+        // ノートコピー＆ペースト用のカスタムMIMEタイプ
+        const customMimeType = "web application/vnd.voicevox.song-notes";


これはペースト時も共通だから外に出したいかも

こちらclipboardHelper側に定数としておく形にいたしました！

Hiroshiba · 2025-03-18T18:52:11Z

src/store/singing.ts

+        try {
+          await navigator.clipboard.writeText(serializedNotes);
+          logger.info("Fallback to plain text.", e);
+          logger.info("Copied to clipboard as plain text", serializedNotes);


これ最近気づいたのですが、エラーになる処理の前にロガー書かないと表示されないんですよね 😇
なのでこうかも？

Suggested change

try {

await navigator.clipboard.writeText(serializedNotes);

logger.info("Fallback to plain text.", e);

logger.info("Copied to clipboard as plain text", serializedNotes);

try {

logger.info("Fallback to plain text.", e);

await navigator.clipboard.writeText(serializedNotes);

logger.info("Copied to clipboard as plain text", serializedNotes);

loggerをclipboardHelper側に置くのは微妙に思えたのと、
loggerなくても良いように思えたため、いったんlogger削除いたしました。

問題あれば、copyNotesToClipboardとreadNotesFromClipboardあたりをtry...catchして
スローされたエラーをloggerで表示がいいかなあと…

Hiroshiba · 2025-03-18T18:59:59Z

src/store/singing.ts

+        for (const item of clipboardItems) {
+          if (item.types.includes(customMimeType)) {
+            const blob = await item.getType(customMimeType);
+            clipboardText = await blob.text();
+            break;
+          }
+        }
+
+        // カスタムMIMEタイプが見つからない場合は通常のテキストを試す
+        if (!clipboardText) {
+          for (const item of clipboardItems) {
+            if (item.types.includes("text/plain")) {
+              const blob = await item.getType("text/plain");
+              clipboardText = await blob.text();
+              break;
+            }
+          }
+        }


（ただのコメントです）

処理がにてるから関数切り出しできそう！！

terapotan · 2025-03-20T02:37:20Z

@romot-co
PRありがとうございます！　動作を見た感じ良さそうでした！！
一点軽くコメントしたので、そちらだけご確認いただければ！

terapotan · 2025-03-20T02:38:43Z

src/store/singing.ts

+        // カスタムMIMEタイプのデータを読み込む
+        const customMimeType = "web application/vnd.voicevox.song-notes";
+        // クリップボードアイテムからカスタムMIMEタイプのデータを探す
+        for (const item of clipboardItems) {


以下のような感じで、メソッドチェインにしてあげると分かりやすいかも？
（好みの問題な気もしますが）

const clipboardText = await Promise.any( clipboardItems .filter(item => item.types.includes("text/plain")) .map(item => item.getType("text/plain").then(blob => blob.text())) ) || null;

@terapotan
ありがとうございます！！なるほどたしかに！！
ただの好みなのですが、Promise周辺でfilter/map/reduce/forEach...を使うとポンコツなのでたまにやらかすのと、
catchが別途いる感じになったりなどあるので、forで回せればなと思っています！

…ustom_mimetype-2591

…thub.com/romot-co/voicevox into fix/copy_paste_with_custom_mimetype-2591

Copilot

Pull Request Overview

This PR fixes an issue where, when pasting notes into non‐sequencer contexts, the wrong clipboard data would be pasted. Key changes include adding new clipboard helper functions to copy and read notes with custom MIME types, refactoring the store actions to use these helper functions, and adjusting import paths for consistency.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/store/singing/clipboardHelper.ts	New helper functions to handle note copying and pasting with custom MIME types
src/store/singing/index.ts	Refactored clipboard actions to delegate to the new helper functions and updated import paths

src/store/singing/clipboardHelper.ts

Copilot

Pull Request Overview

This pull request fixes the clipboard paste behavior by distinguishing between sequencer paste (which requires full note information) and general paste (which should include only lyrics).

Updated import paths and refactored clipboard actions in the singing store
Introduced helper functions for copying and reading notes from the clipboard
Adjusted the paste command to use the new clipboard helper functions

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/store/singing/index.ts	Refactored copy and paste actions to utilize the new clipboard helper
src/store/singing/clipboardHelper.ts	Added helper functions for handling clipboard operations with MIME types

src/store/singing/clipboardHelper.ts

sigprogramming

レビューしました！（遅くなりすみません…！）

src/store/singing/clipboardHelper.ts

…thub.com/romot-co/voicevox into fix/copy_paste_with_custom_mimetype-2591

romot-co · 2025-04-05T05:35:22Z

こういう場合のテストを考えてみた：

モック化したテスト必要に思えるけども、クリップボードAPIの変なモックになる
Chrome/Electronのみであったりhttpsのみであったり環境依存をモックする不確かなものになりそう
思いつきとしては: あえて失敗させてフォールバック側が動作するかを確認するテストなど？
ロジックのユニットテストは行えそうだが、実装の詳細に依存するものになりそうで、意味があるものになるのかよくわからない

Claudeくんに聞いてみた
…わかるけども実環境での問題をカバーできない気もする
https://claude.ai/share/052155c7-698e-444b-b795-0359601e9ddd

Copilot

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

Comments suppressed due to low confidence (1)

src/store/singing/clipboardHelper.ts:64

[nitpick] Consider capturing the error in this catch block (e.g. catch (error)) and optionally logging it to provide more context for debugging failures in writing with the custom MIME type.

      } catch {

Copilot

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

src/store/singing/clipboardHelper.ts:142

[nitpick] The error message thrown in the catch block of validateNotesForClipboard does not differentiate between JSON parsing errors and schema validation errors. Consider separating these error cases to provide clearer troubleshooting information.

function validateNotesForClipboard(clipboardText: string): Omit<Note, "id">[] {

src/store/singing/index.ts

sigprogramming

LGTM！！
ChromeとFireFoxで動作確認しましたが、問題なさそうでした！

src/store/singing/clipboardHelper.ts

Copilot

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

Hiroshiba · 2025-04-17T14:57:49Z

@sevenc-nanashi さんすみません！！

ちょっとENGINEの方でいっぱいレビューすることがあるので、こちらのレビューをお任せしても良いでしょうか 🙇

Hiroshiba · 2025-04-17T14:50:34Z

src/store/singing/clipboardHelper.ts

+  // 選択されたトラックがない場合は何もしない
+  if (!selectedTrack) return;


これがundefinedになることは無さそう？

Hiroshiba · 2025-04-17T15:02:28Z

@romot-co

こういう場合のテストを考えてみた：

かなり難しいんですけど、とりあえずVOICEVOXとしてはelectron(chrome)でのe2eテストが行われていれば十分な気がしました！
Playwrightを使ってchromim上でテストするので、多分クリップボードとかも確認できるので、それでテキストがないことを確認するとか？

あるいはユニットテストにするのもありかもです！
今テストコードは *.browser.spec.ts という名前にすれば、実際のブラウザ上でのテストになります。
テストランナーはvitestなのですが、vitestがplaywrightを使ってブラウザ上でテストを実行するんですよね。

voicevox/vitest.workspace.ts

Lines 39 to 55 in 0c34bae

    
           // Chromiumブラウザ環境 
        
           { 
        
             extends: "./vite.config.ts", 
        
             test: { 
        
               include: browserTestPaths, 
        
               globals: true, 
        
               name: "browser", 
        
               browser: { 
        
                 enabled: true, 
        
                 instances: [{ browser: "chromium" }], 
        
                 provider: "playwright", 
        
                 headless: true, 
        
                 api: 7158, 
        
                 ui: false, 
        
               }, 
        
             }, 
        
           },

これでもしかしたらクリップボードのテストもできる･･･かも･･･？
（でもブラウザの中からクリップボードにアクセスするのが難しくて、やっぱりe2eテストのが良いのかも！）

Hiroshiba · 2025-04-22T08:16:54Z

ping @sevenc-nanashi

sevenc-nanashi · 2025-04-22T09:33:50Z

src/store/singing/clipboardHelper.ts

+        type: "text/html",
+      });
+      // 安全策としてのtext/plainの空文字
+      const emptyTextBlob = new Blob([""], {


気持ち的に歌詞もコピーしてくれたほうが嬉しいかも？

歌詞コピーにしました！

※ コピペは現実的にそんなに困らず優先度高くないと思うので、レビュー後回しでお願いします…！

sevenc-nanashi · 2025-04-22T09:35:02Z

src/store/singing/clipboardHelper.ts

+    const clipboardItem = new ClipboardItem({
+      [VOICEVOX_NOTES_MIME_TYPE]: notesBlob,
+    });
+    await navigator.clipboard.write([clipboardItem]);


(try VOICEVOX_NOTES_MIME_TYPE catch text/html) and text/plainみたいな感じに整理したほうが見やすいかも。

こちら修正しました！

…ustom_mimetype-2591

コピーをカスタムMIMEタイプで振り分け、シーケンサでのペーストの場合はノート情報・一般ペーストの場合は歌詞のみにする

4c07bdc

romot-co requested a review from a team as a code owner March 15, 2025 11:10

romot-co requested review from Hiroshiba and removed request for a team March 15, 2025 11:10

フォールバック動作を修正

63a8655

Merge branch 'main' into fix/copy_paste_with_custom_mimetype-2591

5c39b4a

Hiroshiba requested review from Copilot and sevenc-nanashi March 18, 2025 17:57

Copilot AI reviewed Mar 18, 2025

View reviewed changes

Hiroshiba requested a review from sigprogramming March 18, 2025 17:58

Hiroshiba reviewed Mar 18, 2025

View reviewed changes

terapotan reviewed Mar 20, 2025

View reviewed changes

romot-co added 4 commits March 26, 2025 21:51

Merge remote-tracking branch 'origin/main' into fix/copy_paste_with_c…

e27ae0e

…ustom_mimetype-2591

クリップボードへの書き込み・読み込みをclipboardHelperに移管

a218d66

noteSchemeでのバリデーション

933a7b7

Merge branch 'fix/copy_paste_with_custom_mimetype-2591' of https://gi…

fdb29c5

…thub.com/romot-co/voicevox into fix/copy_paste_with_custom_mimetype-2591

romot-co requested a review from Copilot March 26, 2025 15:15

Copilot AI reviewed Mar 26, 2025

View reviewed changes

src/store/singing/clipboardHelper.ts Outdated Show resolved Hide resolved

romot-co added 2 commits March 27, 2025 01:26

バリデーションを分離

8a6c7e8

コメント修正

6460bd4

romot-co requested a review from Copilot March 26, 2025 16:32

Copilot AI reviewed Mar 26, 2025

View reviewed changes

src/store/singing/clipboardHelper.ts Outdated Show resolved Hide resolved

フォーマット

b7f1402

romot-co requested review from Hiroshiba and terapotan March 26, 2025 17:01

sigprogramming reviewed Mar 31, 2025

View reviewed changes

src/store/singing/clipboardHelper.ts Outdated Show resolved Hide resolved

src/store/singing/clipboardHelper.ts Outdated Show resolved Hide resolved

src/store/singing/clipboardHelper.ts Outdated Show resolved Hide resolved

src/store/singing/clipboardHelper.ts Outdated Show resolved Hide resolved

romot-co added 3 commits April 1, 2025 16:03

Merge branch 'main' into fix/copy_paste_with_custom_mimetype-2591

f3a52dd

指摘事項修正

0bf2b52

Merge branch 'fix/copy_paste_with_custom_mimetype-2591' of https://gi…

6c6d6df

…thub.com/romot-co/voicevox into fix/copy_paste_with_custom_mimetype-2591

romot-co added 3 commits April 4, 2025 08:46

フォールバックの場合においても一般ペーストでは何もペーストされないようにする

928b3ba

clipboardのwrite/writeText/read/readTextそれぞれでフォールバック

5b7452f

typo

e081265

sigprogramming requested a review from Copilot April 5, 2025 07:42

Copilot AI reviewed Apr 5, 2025

View reviewed changes

romot-co added 2 commits April 5, 2025 17:15

コピー＆ペーストのフォールバックを見直す

6cbdd98

コンフリクト解消

cff813d

romot-co requested a review from Copilot April 5, 2025 08:33

Copilot AI reviewed Apr 5, 2025

View reviewed changes

src/store/singing/index.ts Outdated Show resolved Hide resolved

revert: setSinkIdの対応をもとに戻す

0bf5ffc

sigprogramming approved these changes Apr 5, 2025

View reviewed changes

src/store/singing/clipboardHelper.ts Show resolved Hide resolved

src/store/singing/clipboardHelper.ts Outdated Show resolved Hide resolved

コメントを調整

28a869c

Hiroshiba requested a review from Copilot April 17, 2025 14:55

Copilot AI reviewed Apr 17, 2025

View reviewed changes

Hiroshiba reviewed Apr 17, 2025

View reviewed changes

sevenc-nanashi reviewed Apr 22, 2025

View reviewed changes

romot-co added 3 commits May 13, 2025 19:19

Merge remote-tracking branch 'origin/main' into fix/copy_paste_with_c…

aaa69cc

…ustom_mimetype-2591

指摘事項修正およびE2Eテストの追加

69510b8

テストの調整

05d7de8

		// ノートコピー＆ペースト用のカスタムMIMEタイプ
		const customMimeType = "web application/vnd.voicevox.song-notes";

		// 選択されたトラックがない場合は何もしない
		if (!selectedTrack) return;

fix: ノートをコピーして歌詞入力などのペーストしたときにノートオブジェクトがペーストされないようにする #2615

Are you sure you want to change the base?

fix: ノートをコピーして歌詞入力などのペーストしたときにノートオブジェクトがペーストされないようにする #2615

Uh oh!

Conversation

romot-co commented Mar 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

内容

ElectronエディタやChromeの場合

ブラウザ版でFirefoxやSafariなどの場合

関連 Issue

スクリーンショット・動画など

その他

Uh oh!

voicevox-preview-pages bot commented Mar 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Hiroshiba commented Mar 18, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Hiroshiba left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

terapotan commented Mar 20, 2025

Uh oh!

terapotan Mar 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

sigprogramming left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

romot-co commented Apr 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sigprogramming left a comment

Choose a reason for hiding this comment

romot-co commented Mar 15, 2025 •

edited

Loading

voicevox-preview-pages bot commented Mar 15, 2025 •

edited

Loading

Hiroshiba left a comment •

edited

Loading

terapotan Mar 20, 2025 •

edited

Loading

romot-co commented Apr 5, 2025 •

edited

Loading

sevenc-nanashi Apr 22, 2025 •

edited

Loading